<template>
	<div class="index">
		<div class="header">店铺地址可导航</div>
		<input class="van-search" type="text" placeholder="请输入搜索关键词" @click="onTap" />
		<div class="h4">推荐套装</div>
		<div class="midder">
			<div class="image">
				<img class="images1" src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5oHzdzhU3kGoi62tC0RDHPsn7RQJvpmkVmigfK*rUDLq5MZrw9LcHtZYtWjWLq9L8mAHzW1rtoZOx4q13OHO*Tg!/b&bo=6APcBQAAAAADBxA!&rf=viewer_4" alt="" />
				<span>女子职业形象照</span>
			</div>
			<div class="image">
				<img class="images1" src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5q7GSnPvf4SAV3r7JBRWs6uE1o.RxmTMMS2V37n5d7SqNigAMPUeKBfw.YEEFDtABYVuyUw766tB*ALE.CSY2cA!/b&bo=3gNfBAAAAAADB6Q!&rf=viewer_4" alt="" />
				<span>文艺照片-单人</span>
			</div>
			<div class="image">
				<img class="images1" src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5q7GSnPvf4SAV3r7JBRWs6tje3WDq2URpGFCNnDZwl4FZTAUf*OxnrOvwFb3BMUwVdpOvkEoytZ2WwYiPlJJ17k!/b&bo=3gNfBAAAAAADB6Q!&rf=viewer_4" alt="" />
				<span>证件照-经典</span>
			</div>
		</div>
		
    <div class="left-sidebar">
      <div class="sidebar-item" v-for="listItem in list" :key="listItem.id" @click="handleItemClick(listItem.id)">
        <p>{{ listItem.title }}</p>
      </div>
    </div>

    <!-- 右侧底部栏 -->
    <div class="footer">
      <div class="right-sidebar">
        <div class="sidebar-items" v-for="filteredItem in filteredItems" :key="filteredItem.id">
          <p>{{ filteredItem.name }}</p>
		  <img src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5oHzdzhU3kGoi62tC0RDHPuw2HWu5a.dWOT9GEng7wrv.vYfWvKPp1B.G3SRCsqHwvlRa*d61NipFAKv1D.b0Do!/b&bo=nALOAQAAAAADN0M!&rf=viewer_4" class="images" @click="onTaps" alt="" />
        </div>
      </div>
    </div>
		<div @click="goToShoppingCart" class="floating-ball">
			<van-icon name="shopping-cart-o" class="icon-g" />
			购物车
		</div>
	</div>
</template>


<script>
	export default {
		data() {
			return {
				activeKey: 0,
				value: '',
				activeId: 0,
				list: [{
						id: 1,
						title: "梦幻联动"
					},
					{
						id: 2,
						title: "人气推荐"
					},
					{
						id: 3,
						title: "证件精选"
					},
					{
						id: 4,
						title: "爱情精选"
					},
					{
						id: 5,
						title: "形象精选"
					},
					{
						id: 6,
						title: "企业服务"
					}
				],
				items: [{
						id: 1,
						name: "迪士尼合作款",
						img: "http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5oHzdzhU3kGoi62tC0RDHPuw2HWu5a.dWOT9GEng7wrv.vYfWvKPp1B.G3SRCsqHwvlRa*d61NipFAKv1D.b0Do!/b&bo=nALOAQAAAAADN0M!&rf=viewer_4",
						type: 1
					},
					{
						id: 2,
						name: "迪士尼合作款",
						img: "http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5oHzdzhU3kGoi62tC0RDHPuw2HWu5a.dWOT9GEng7wrv.vYfWvKPp1B.G3SRCsqHwvlRa*d61NipFAKv1D.b0Do!/b&bo=nALOAQAAAAADN0M!&rf=viewer_4",
						type: 2
					},
					{
						id: 3,
						name: "迪士尼合作款",
						img: "http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5oHzdzhU3kGoi62tC0RDHPuw2HWu5a.dWOT9GEng7wrv.vYfWvKPp1B.G3SRCsqHwvlRa*d61NipFAKv1D.b0Do!/b&bo=nALOAQAAAAADN0M!&rf=viewer_4",
						type: 2
					},
					{
						id: 4,
						name: "迪士尼合作款",
						img: "http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5oHzdzhU3kGoi62tC0RDHPuw2HWu5a.dWOT9GEng7wrv.vYfWvKPp1B.G3SRCsqHwvlRa*d61NipFAKv1D.b0Do!/b&bo=nALOAQAAAAADN0M!&rf=viewer_4",
						type: 2
					},

				],
				filteredItems: [ ]
			}
		},
		methods: {
				handleItemClick: function(id) {
					// 根据 id 执行相应的操作，例如筛选右侧栏的内容
					this.filteredItems = this.items.filter(item => item.type === id);
				},
			onTap: function(item) {
				// 根据 item 执行相应的操作，例如跳转到详情页面
				uni.navigateTo({
				  url: '/pages/hot/search/search',
				  // 其他参数配置
				});
			},
			onTaps: function(item) {
				// 根据 item 执行相应的操作，例如跳转到详情页面
				uni.navigateTo({
				  url: '/pages/hot/detail/detail',
				  // 其他参数配置
				});
			},
			onLoad(options) {
				let item = JSON.parse(decodeURIComponent(options.item))
			},
			onTapa: function(item) {
				 },
			goToShoppingCart: function() {
				 }
		},
		mounted() {
			this.filteredItems = this.items.filter(item => item.type === id);
		}
	}
</script>

<style>
switch{
  width: 750rpx;
  height: 400rpx;
}
.image{
  width: 115px;
  height: 155px;
  margin: 0 5px;
  text-align: center;
  box-shadow: 10px 10px 5px 0px rgba(231, 226, 226, 0.75);
}
.header{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}
.h4{
  margin: 20px 0;
  font-size: 16px;
  font-weight: bold;
}
.midder{
  display: flex;
}

.left-sidebar{
  margin-top: 15px;
  width: 80px;
  background-color:gainsboro;
  box-shadow: 2px 5px 5px 0px gainsboro;
  padding-top: 3px;
}
.images{
  width: 266.5px;
  height: 183.5px;
}
.sidebar-item{
  margin-top: 3px;
  padding:3px;
}
.sidebar-item {
  border: 1px solid rgb(32, 22, 22);
  box-shadow: 0 0 10px rgba(22, 20, 20, 0.5);
  background-color: rgb(255, 255, 255);
}
.sidebar-item:hover{
  color: cyan;
}
.right-sidebar{
  position: absolute;
  left: 84px;
  top: 280px;
}
.sidebar-items{
  margin-top: 3px;
  padding:3px;
}
.floating-ball{
  position: fixed;
  bottom: 100rpx;
  right: 20rpx;
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  background: rgb(255, 164,0);
  box-shadow: rgb(134,89,7) 0px 0px 16px 0px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  color:white;
}
.images1{
  width: 115px;
  height: 115px;
}
.icon-g{
  position:absolute;
  top: 16px;
}
.van-search{
	border: black solid 1px;
	border-radius: 5%;
}
</style>